<script lang="ts" setup>
import { reactive, ref } from 'vue'
import axios from "axios"
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
var goBack = function () {
  if(window.localStorage.getItem("user")=="undefined" || window.localStorage.getItem("user")==null){alert("当前为未登录上传页，只能用于上传，不可返回主页")}
  else {window.location.replace("../Home/Home.html");}
};
// do not use same name with ref
const form = reactive({
  name: '',
  insit: '',
  contact: '',
  subject: '',
  major: '',
})
const ruleFormRef = ref<FormInstance>()

const fileList_cover = ref<UploadUserFile[]>([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  }
])

const fileList_pic = ref<UploadUserFile[]>([
  {
    name: 'food2.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  }
])
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
}

const labelPosition = ref('top')
const size = ref('large')
const textarea = ref('')
let Type = ''

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ], insit: [
    { required: true, message: '请输入书院', trigger: 'blur' }
  ],
  contact: [
    { required: true, message: '请选择联系方式', trigger: 'blur' }
  ],
  subject: [
    { required: true, message: '请输入辅导科目', trigger: 'blur' }
  ], major: [
    { required: true, message: '请输入主修专业', trigger: 'blur' }
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      console.log(fileList_cover.value[0].url)
      var proxy = {
        "name": form.name,
        "insit": form.insit,
        "contact": form.contact,
        "subject": form.subject,
        "major": form.major
      };
      var proxy_form = new FormData();
      proxy_form.append("name", proxy.name)
      proxy_form.append("insit", proxy.insit)
      proxy_form.append("contact", proxy.contact)
      proxy_form.append("subject", proxy.subject)
      proxy_form.append("major", proxy.major)
      console.log(proxy)
      axios({
        url: 'http://8.130.46.21:8000/volunteer/add/',
        method: 'post',
        data: proxy_form
      })
      console.log('success')


      alert('发布成功')
      // setTimeout(function () {
      //   goBack()
      // }, 50)
      form.contact='';
      form.insit='';
      form.major='';
      form.name='';
      form.subject='';
    } else {
      console.log('error submit!')
      alert('发布失败，请核对后重试')
    }
  })
}


const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
// const onSubmit=function(){
//   console.log(fileList_cover.value[0].url)
//   var proxy={
//         "name":form.name,
//         "insit":form.insit,
//         "contact":form.contact,
//         "subject":form.subject,
//         "major":form.major
//       };
//   console.log(proxy)
//    axios({
//       url:'http://192.168.2.108:3000/volunter',
//       method: 'post',
//       data:proxy
//   })
//   console.log('success')
// }

</script>



<template>
  <div class="main">
    <div class="grxx">
      <div class="back" @click="goBack()">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-left" />
        </svg>
      </div>志愿者上传
    </div>
    <el-form :model="form" label-width="60px" :label-position="labelPosition" :size="size" :rules="rules"
      ref="ruleFormRef">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" clearable />
      </el-form-item>
      <el-form-item label="书院" prop="insit">
        <el-input v-model="form.insit" />
      </el-form-item>
      <el-form-item label="联系方式" prop="contact">
        <el-input v-model="form.contact" />
      </el-form-item>
      <el-form-item label="擅长科目" prop="subject">
        <el-input v-model="form.subject" />
      </el-form-item>
      <el-form-item label="主修专业" prop="major">
        <el-input v-model="form.major" />
      </el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">发布</el-button>
      <el-button @click="goBack">返回</el-button>
    </el-form>
  </div>
</template>



<style scoped>
.upload-demo {
  width: 100%;
}

.back {
  position: absolute;
  color: white;
  line-height: 30px;
  padding-left: 10px;
  /* background-color: #fff; */
  padding-right: 10px;
}

.grxx {
  /* display: block; */
  /* background-color: gray; */
  width: 100%;
  /* position: absolute; */
  font-size: 20px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  color: rgb(79, 79, 79);
}
</style>